<template>
  <div class="addAddress">
    <header class="top">
      <span @click="back">返回</span>
      <span v-text="title"></span>
    </header>
    <div class="inp">
      <div class="inpOne">
        <input type="text" placeholder="填写你的姓名" v-model="name" /><br />
      </div>
      <div class="inpOne">
        <input
          type="text"
          placeholder="小区/写字楼/学校等 "
          @click="jumpToSearch"
          v-model="address"
        />
      </div>
      <div class="inpOne">
        <input type="text" placeholder="详细地址" v-model="address_detail" />
      </div>
      <div class="inpOne">
        <input type="text" placeholder="手机号" v-model="phone" />
      </div>
      <div class="inpOne">
        <input type="text" placeholder="备用手机号" v-model="byphone" />
      </div>
    </div>
    <button @click="add" class="btn">新增收货地址</button>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "addAddress",
  data() {
    return {
      title: "新增收货信息",
      name: "",
      address: "",
      address_detail: "",
      phone: "",
      byphone: "",
    };
  },
  created() {
    this.address = this.newPosition.name;
    console.log(this.newPosition);
  },
  methods: {
    back() {
      this.$router.back();
    },
    //搜索地点
    jumpToSearch() {
      this.$router.push({
        name: "searchAdd",
      });
    },
    // 添加
    add() {
      let api = this.eleUrl.takeOver + this.userLoginMsg.id + "/addresses";
      this.$http({
        url: api,
        method: "post",
        data: {
          user_id: this.userLoginMsg.id,
          address: this.address,
          address_detail: this.address_detail,
          geohash: this.newPosition.geohash,
          name: this.name,
          phone: this.phone,
          tag: "标签",
          sex: 1,
          poi_type: 0,
          phone_bk: this.byphone,
          tag_type: 3,
        },
      }).then((res) => {
        if (res.data.status == 1) {
          alert(res.data.success);
          //清空输入框
          (this.name = ""),
            (this.address = ""),
            (this.address_detail = ""),
            (this.phone = ""),
            (this.byphone = "");
        }
        //console.log(res.data);
      });
    },
    getTakeOver() {
      let api = this.eleUrl.takeOver + this.userLoginMsg.id + "/addresses";
      this.$http({
        url: api,
        method: "get",
      }).then((res) => {
        this.address = res.data;
        console.log(res.data);
      });
    },
  },
  computed: {
    ...mapState(["eleUrl", "userLoginMsg", "newPosition"]),
  },
};
</script>

<style>
.addAddress {
  font-size: 0.15rem;
}
.top {
  height: 0.4rem;
  width: 100%;
  background-color: rgb(80, 143, 238);
}
.top > span {
  color: white;
  line-height: 0.4rem;
  margin-left: 0.2rem;
}
.top > span:nth-child(2) {
  margin-left: 1rem;
  font-weight: bold;
}
/* 输入框 */
.inp {
  margin-top: 0.15rem;
  background-color: #fff;
}
.inpOne {
  width: 100%;
  height: 0.5rem;
  line-height: 0.5rem;
}
.inp input {
  border: none;
  outline: none;
  font-size: 0.16rem;
  width: 100%;
  margin-left: 0.1rem;
}
/* 登录按钮 */
.btn {
  width: 96%;
  height: 0.4rem;
  display: block;
  margin: 0 auto;
  border: none;
  color: white;
  font-size: 0.16rem;
  background-color: #67d96a;
  border-radius: 5px;
}
.serchPosition {
  border-bottom: 2px solid #ddd;
  border-top: 2px solid #ddd;
  background-color: #fff;
  width: 3.75rem;
  margin: 0 auto;
  margin-top: 0.1rem;
}
.serchPosition > input {
  height: 0.28rem;
  width: 80%;
  border-radius: 5px;
  outline: none;
  border: 1px solid gray;
  display: block;
  margin: 0.1rem auto;
  padding-left: 0.1rem;
}
</style>